<template>
  <div class="mtop-20">
    <!-- 头部区域 -->
    <div class="font-bold">找到了{{ this.searchInfo.keywords }}</div>
    <ul class="search-menu">
      <li
        v-for="(item, index) in text"
        :key="index"
        class="pointer search-menu-item"
        :class="{ isActive: vIndex === index }"
        @click="handMenuClick(index)"
      >
        {{ item }}
      </li>
    </ul>
    <el-skeleton v-if="isLoading" :rows="12" animated />
    <template v-else-if="total !== 0">
      <!-- 歌曲 -->
      <MusicList v-if="vIndex === 0" :list="searchList.musicList"></MusicList>
      <!-- 专辑 -->
      <infoList
        v-if="vIndex === 1"
        :list="searchList.albumList"
        @clickitem="toAlbumDetail"
      >
        <template #img="{ item }">
          <img class="sub-img mleft-10" :src="item.picUrl" />
        </template>
        <template #title="{ item }">
          {{ item.name }}
        </template>
        <template #item1="{ item }">
          <span style="color: #676767">{{ item.artist.name }}</span>
        </template>
      </infoList>
      <!-- 歌手 -->
      <infoList
        v-if="vIndex === 2"
        :list="searchList.artistList"
        @clickitem="toArtistDetail"
      >
        <template #img="{ item }">
          <img class="sub-img mleft-10" :src="item.picUrl" />
        </template>
        <template #title="{ item }">
          {{ item.name }}
        </template>
      </infoList>
      <!-- 歌单 -->
      <infoList
        v-if="vIndex === 3"
        :list="searchList.playList"
        @clickitem="toPlayDetail"
      >
        <template #img="{ item }">
          <img class="sub-img mleft-10" :src="item.coverImgUrl" />
        </template>
        <template #title="{ item }">
          {{ item.name }}
        </template>
        <template #item1="{ item }">{{ item.trackCount }}</template>
        <template #item2="{ item }">
          by <span style="color: #676767">{{ item.creator.nickname }}</span>
        </template>
      </infoList>
      <!-- 用户 -->
      <infoList
        v-if="vIndex === 4"
        @clickitem="toUserDetail"
        :list="searchList.userList"
      >
        <template #img="{ item }">
          <img
            class="sub-img mleft-10"
            :src="item.avatarUrl + '?param=100y100'"
            alt=""
          />
        </template>
        <template #title="{ item }">
          {{ item.nickname }}
        </template>
      </infoList>
      <!-- mv -->
      <MvList 
        v-if="vIndex === 5"
        :disable="true" 
        :list="searchList.mvList"></MvList>
    </template>
  </div>
</template>

<script>
import { getSearchMusic } from "../../api/request";
import MusicList from "../../components/list/MusicList.vue";
import infoList from "../../components/list/infoList.vue";
import MvList from "../../components/list/MvList.vue"
export default {
  props: ["keywords"],
  components: {
    MusicList,
    infoList,
    MvList
  },
  data() {
    return {
      /* 搜索分页信息 */
      searchInfo: {
        keywords: "",
        limit: 30,
        offset: 0,
        type: 1,
      },
      /* 检索到的列表 */
      searchList: {
        musicList: [],
        albumList: [],
        artistList: [],
        playList: [],
        userList: [],
        mvList: [],
      },
      isLoading: true,
      total: 0,
      searchType: [1, 10, 100, 1000, 1002, 1004],
      text: ["单曲", "专辑", "歌手", "歌单", "用户", "MV"],
      sizeText: ["首", "张", "位", "个", "位", "个"],
      vIndex: 0,
    };
  },
  watch: {
    keywords(val) {
      this.searchInfo.keywords = decodeURIComponent(val);
      this.search();
    },
    vIndex(val) {
      this.searchInfo.type = this.searchType[val];
      this.searchInfo.offset = 0;
      this.search();
    },
  },
  created() {
    this.searchInfo.keywords = decodeURIComponent(this.keywords);
    this.search();
  },
  methods: {
    async search() {
      if (this.searchInfo.keywords == "") return;
      this.isLoading = false;
      const { data: res } = await getSearchMusic(this.searchInfo);
      console.log(res);
      if (res.code !== 200) return this.$message.error("请求失败");
      if (Object.keys(res.result).length === 0) {
        this.total = 0;
        this.isLoading = false;
        return;
      }
      switch (this.vIndex) {
        case 0:
          this.searchList.musicList = Object.freeze(res.result.songs);
          this.total = res.result.songCount;
          break;
        case 1:
          this.searchList.albumList = Object.freeze(res.result.albums);
          this.total = res.result.albumCount;
          break;
        case 2:
          this.searchList.artistList = Object.freeze(res.result.artists);
          this.total = res.result.artistCount;
          break;
        case 3:
          this.searchList.playList = Object.freeze(res.result.playlists);
          this.total = res.result.playlistCount;
          break;
        case 4:
          this.searchList.userList = Object.freeze(res.result.userprofiles);
          this.total = res.result.userprofileCount;
          break;
        case 5:
          this.searchList.mvList = Object.freeze(res.result.mvs);
          this.total = res.result.mvCount;
          break;
      }
      console.log(this.searchList);
      console.log(this.total);
    },
    handMenuClick(index) {
      this.vIndex = index;
    },
    toAlbumDetail(row) {
      this.$router.push("/albumdetail/" + row.id);
    },
    toArtistDetail(row) {
      this.$router.push("/artistdetail/" + row.id);
    },
    toPlayDetail(row) {
      this.$router.push("/playlistdetail/" + row.id);
    },
    toUserDetail(row){
      this.$router.push("/userdetail/" + row.userId);
    }
  },
};
</script>

<style lang="less" scoped>
.search-menu {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  margin: 20px 0;
  &-item {
    width: 40px;
    margin-right: 20px;
    line-height: 1;
    text-align: center;
    &.isActive {
      font-size: 16px;
      font-weight: bold;
      &::after {
        display: block;
        content: "";
        height: 4px;
        width: 90%;
        margin: 0 auto;
        background-color: #ec4141;
        border-radius: 2px;
      }
    }
  }
}
</style>